<template>
  <view class="page">
    <u-sticky :offsetTop="0">
      <view class="page-head-tabs">
        <view class="tabs-wrap" key="tabs-1">
          <u-tabs
            :current="tabCurrent"
            :scrollable="false"
            :list="tabList"
            keyName="title"
            lineColor="#F49C0D"
            :lineWidth="28"
            :lineHeight="2"
            @click="tabClick"
            :itemStyle="{ height: '44px', fontSize: '28rpx', color: '#B3B9C9' }"
            :activeStyle="{ fontWeight: 'bold', color: '#000000' }"
            :inactiveStyle="{}"></u-tabs>
        </view>
      </view>
    </u-sticky>

    <view class="page-ctx">
      <view data-title="商城订单" class="order-view">
        <view class="order-wrap">
          <view class="order-list">
            <view
              class="item"
              v-for="(item, index) in invoice_list"
              :key="index"
              @click="toDetail(item)">
              <view class="item-top flex-between">
                <text class="order-sn">订单号：{{ item.orderId }}</text>
                <text class="status">{{ item.cus_status_title }}</text>
              </view>

              <view class="item-center">
                <view class="products-wrap">
                  <view class="product-list">
                    <view
                      class="product-item flex"
                      v-for="(product, index) in item.products">
                      <view class="poster-box">
                        <image :src="product.image" mode="aspectFill"></image>
                      </view>
                      <view class="info">
                        <view class="title-box">
                          <view class="title ellipsis-2">
                            {{ product.title }}
                          </view>
                        </view>
                        <view class="t1">作品分类</view>
                        <view class="t2">
                          <text>￥</text>
                          99.00
                        </view>
                      </view>
                    </view>
                  </view>
                </view>
              </view>
              <view class="item-bottom">
                <!-- <view class="total-box ">
										<view class="price">
											合计金额：￥{{item.price}}
										</view>
									</view> -->

                <view class="btns flex">
                  <view class="btn fit-text btn-detail">开票详情</view>
                </view>
              </view>
            </view>
          </view>
        </view>
      </view>
      <view class="load-more-wrap" style="margin-top: 40rpx">
        <u-loadmore :status="invoice_loadmore_status" />
      </view>
    </view>
    <!-- 列表 -->
  </view>
</template>

<script>
// import invoice_list_for_shop from '@/components/invoice/invoice_list_for_shop.vue'
export default {
  components: {
    // invoice_list_for_shop,
  },
  data() {
    return {
      //
      tabCurrent: 0,
      tabSelect: {
        title: "全部",
        value: 0,
      },
      tabList: [
        {
          title: "全部",
          value: 0,
        },
        {
          title: "待开票",
          value: 1,
        },
        {
          title: "已开票",
          value: 2,
        },
        // {
        // 	title: '已作废',
        // 	value: -1,
        // },
      ],

      //
      count: 0,
      invoice_list: [
        {
          orderId: "1111",
          cus_status_title: "待开票",
          products: [
            {
              title: "333",
              keyVals: "444",
              priceSale: "44",
              unit: "555",
              num: "12",
            },
          ],
        },
      ],
      pagination: {
        page: 1,
        pageNum: 10,
      },
      invoice_loadmore_status: "loadmore", //loadmore  / loading / nomore

      statusNameMap: {
        //	状态：0-全部 2-待开票 3-已开票
        0: "",
        1: "待开票",
        2: "已开票",
        "-1": "已作废",
      },
      //
    };
  },

  onLoad(option) {
    this.setView();
  },
  onShow() {},
  onReachBottom() {
    this.loadMore();
  },

  methods: {
    loadMore() {
      if (this.invoice_loadmore_status == "loadmore") {
        this.invoice_loadmore_status = "loading";
        this.pagination.page++;
        this.query_invoice();
      }
    },
    initQuery() {
      this.invoice_list = [];
      this.pagination.page = 1;
      this.invoice_loadmore_status = "loadmore";
    },
    setView() {
      this.query_invoice();
    },
    query_invoice() {
      this.$api({
        url: "/service.php",
        method: "get",
        data: {
          action: "invoices_getList",
          ...this.pagination,
          status: this.tabSelect.value, //0 全部 1- 待开票 2 已开票 -1 已作废
        },
      }).then((res) => {
        if (res.code == 200) {
          this.count = res.data.count || 0;
          let list = res.data.list || [];
          list.forEach((v) => {
            v.products = JSON.parse(v.info);
            // v.info  = v.products[0]

            v.cus_status_title = this.statusNameMap[v.status];
          });
          this.invoice_list = this.invoice_list.concat(list);
          this.invoice_loadmore_status =
            this.count > this.invoice_list.length ? "loadmore" : "nomore";
        }
      });
    },

    tabClick(item) {
      this.tabCurrent = item.index;
      this.tabSelect = item;
      this.initQuery();
      this.setView();
    },

    toDetail(item) {
      this.toRoute({
        path: "/invoice-detail",
        query: {
          invoiceId: item.id,
          orderId: item.typeId,
        },
      });
    },
  },
};
</script>

<style lang="scss">
page {
  background: #f8f8f8;
}
</style>

<style lang="scss" scoped>
.page-ctx {
  padding: 24rpx 32rpx;
}

.page-head-tabs {
  background: #fff;
}

.page-head-tabs {
  // position: fixed;
  // z-index: 10;
  // top: 0;
  // left: 0;
  // right: 0;
  background: #fff;
}

.order-wrap {
  .order-list {
    .item {
      margin-bottom: 24rpx;
      background: #ffffff;
      box-shadow: 0rpx 0rpx 16rpx 2rpx rgba(0, 0, 0, 0.08);
      border-radius: 16rpx 16rpx 16rpx 16rpx;

      padding: 32rpx 24rpx;
      margin-bottom: 20rpx;
      background: #ffffff;

      .item-top {
        padding: 0 0;
        font-family: PingFang SC, PingFang SC;
        font-weight: 400;
        font-size: 24rpx;
        color: #666666;

        .order-sn {
          font-family: PingFang SC, PingFang SC;
          font-weight: 400;
          font-size: 24rpx;
          color: #b3b9c9;
        }

        .status {
          font-family: PingFang SC, PingFang SC;
          font-weight: 400;
          font-size: 24rpx;
          color: #ff0000;
        }
      }

      .item-center {
        // border-top: 1rpx solid #eee;
      }

      .item-bottom {
        // border-top: 1rpx solid #eee;
        // padding: 20rpx 0;

        .total-box {
          text-align: right;

          .price {
            text-align: right;
            font-family: PingFang SC, PingFang SC;
            font-weight: bold;
            font-size: 28rpx;
            color: #000000;
          }
        }

        .btns {
          flex: 1;
          justify-content: flex-end;
          overflow: hidden;
          flex-wrap: wrap;

          .btn {
            margin-left: 20rpx;
            padding: 0 24rpx;
            min-width: 146rpx;
            height: 64rpx;
            background: #f8f8f8;
            border-radius: 40rpx 40rpx 40rpx 40rpx;
            font-family: PingFang SC, PingFang SC;
            font-weight: 400;
            font-size: 24rpx;
            color: #333333;

            &.btn-detail {
            }

            &.btn-pay {
              background: #cb0011;
              color: #ffffff;
            }

            &.btn-reviews {
            }

            &.btn-cancel {
            }
          }
        }
      }
    }
  }

  .products-wrap {
    padding: 0 0;

    .product-list {
      .product-item {
        padding: 44rpx 0 30rpx;

        & + .product-item {
          border-top: 1rpx solid #eee;
        }

        .poster-box {
          width: 168rpx;
          height: 168rpx;
          background: #ffffff;
          border-radius: 8rpx 8rpx 8rpx 8rpx;
          image {
            width: 100%;
            height: 100%;
          }
        }

        .info {
          flex: 1;
          padding-left: 24rpx;
          .title-box {
          }

          .title {
            font-family: PingFang SC, PingFang SC;
            font-weight: bold;
            font-size: 28rpx;
            color: #000000;
          }
          .t1 {
            font-size: 24rpx;
            color: #000000;
            margin: 8upx 0 6upx;
          }
          .t2 {
            font-weight: bold;
            font-size: 32rpx;
            color: #e23410;
            & > text {
              font-weight: 400;
              font-size: 20rpx;
            }
          }
          .desc-box {
            margin-top: 14rpx;

            .desc {
              font-family: PingFang SC, PingFang SC;
              font-weight: 400;
              font-size: 20rpx;
              color: #b2afc9;
              line-height: 32rpx;
            }
          }

          .price-box {
            margin-top: 24rpx;

            .price-info {
              .huobi {
                font-family: PingFang SC, PingFang SC;
                font-weight: bold;
                font-size: 20rpx;
                color: #000000;
              }

              .price {
                font-family: PingFang SC, PingFang SC;
                font-weight: bold;
                font-size: 36rpx;
                color: #000000;
              }

              .unit {
                font-family: PingFang SC, PingFang SC;
                font-weight: bold;
                font-size: 20rpx;
                color: #000000;
              }
            }

            .num {
              font-family: PingFang SC, PingFang SC;
              font-weight: bold;
              font-size: 24rpx;
              color: #000000;
            }
          }
        }
      }
    }
  }
}
</style>
